<!--
    * Time    : 2021-03-30 14:09:03
    * Author  : 李铧锐
    * Desc    : 自提点 - 核销页面
-->
<template>
    <div class="w750 gray-body font-14 text-333">
        <!-- 验证码 -->
        <div class="user_info bg-fff px-2">
            <div class="h-50p d-flex a-center border-bottom border-c-f8">
                <span class="text-333">验证码类型</span>
                <span class="pl-2">到店提货码</span>
            </div>
            <div class="h-50p d-flex a-center border-bottom border-c-f8">
                <span class="text-333">提货码</span>
                <input style="padding-left: 48px" type="text" placeholder="请输入自提码" v-model="code" />
            </div>
        </div>
        <!-- 底部按钮 -->
        <div class="px-2 mt-5">
            <div class="h-48p flex-center rounded-5 mb-1" :style="{ background: bg02 }" @click="verify">
                <span class="text-fff font-14">验证</span>
            </div>

            <div class="font-12 text-ccc">
                <span>1.请买家提供核销码</span>
                <span class="iconfont px-15p line-h-md" style="font-size: 12px">&#xe6e7;</span>
                <span>2.选择对应验证码类型</span>
                <span class="iconfont px-15p line-h-md" style="font-size: 12px">&#xe6e7;</span>
                <span>3.输入验证码</span>
                <span class="iconfont px-15p line-h-md" style="font-size: 12px">&#xe6e7;</span>
                <span>4.核销成功</span>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { colorRgb } from '@/utils/utils'
import { disSMPointWriteOffVerification } from '@/api/distributorPoints'

export default {
    name: 'pointWriteOff',
    data() {
        return {
            code: ''
        }
    },
    computed: {
        ...mapState(['themes']),
        // 透明背景颜色
        bg02() {
            return this.code.trim().length > 0
                ? this.themes.color
                : `rgba(${colorRgb(this.themes.color).r}, ${colorRgb(this.themes.color).g}, ${colorRgb(this.themes.color).b}, 0.2) !important`
        }
    },
    methods: {
        // 点击验证按钮
        verify() {
            this.$utils.uDebounce(() => {
				disSMPointWriteOffVerification({
				    code: this.code
				})
				    .then((res) => {
				        if (!res.success) return void this.$toast(res.msg)
				
				        this.$router.push({ name: 'pointDetail', query: { id: res.result, source: 10 } })
				    })
				    .catch((err) => {
				    })
			})
        }
    }
}
</script>

<style></style>
